<template>
	<div class="formData">
		<el-form :model="formData" ref="ruleForm" :rules="rules" :inline="true" label-width="110">
			<el-form-item label="字典类型名称" prop="dictName">
				<el-input v-model="formData.dictName" placeholder="请输入字典类型名称" />
			</el-form-item>
			<el-form-item label="字典类型编号" prop="dictType">
				<el-input v-model="formData.dictType" placeholder="请输入字典类型编号" />
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<!-- <el-radio-group v-model="formData.status">
					<el-radio value="0">停用</el-radio>
					<el-radio value="1">在用</el-radio>
				</el-radio-group> -->
				<Select placeholder="请选择状态" :selectData="selects.statusList" v-model:value="formData.status" />
			</el-form-item>
			<el-form-item label="排序号" prop="sortNum">
				<el-input v-model="formData.sortNum" placeholder="请输入数字" />
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input v-model="formData.remark" type="textarea" placeholder="请输入内容"></el-input>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup name="dict">
	
	import Select from '@/components/Select/index.vue'
import {
		ref,
		onMounted,
		reactive,
		nextTick,
		defineExpose
	} from "vue";
	const ruleForm = ref()
	const selects = ref({
		statusList:[
			{label:'停用',value:'0'},
			{label:'在用',value:'1'}
		]
	})
	const formData = ref({
		id: null,
		dictName: '',
		dictType: '',
		status: '1',
		remark: '',
		sortNum: '',
	})
	const validateAmount = (rule, value, callback) => {
		if (!value) {
			return callback()
		}
		// 使用正则表达式校验小数点后是否只有两位  
		if (!/^-?\d+(\.\d{1,2})?$/.test(value)) {
			callback(new Error('请输入数字'));
		} else {
			// 注意：这里可能还需要进一步处理，确保末尾不是".00"之类的，但为简化示例，暂不处理  
			callback();
		}
	}
	const rules = reactive({
		dictName: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		dictType: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		sortNum: [{
			validator: validateAmount,
			trigger: 'blur'
		}],
	})

	const validate = async () => {
		let flag = false
		await ruleForm.value.validate((valid) => {
			if (valid) {
				flag = true
			} else {
				flag = false
				/* ElMessage.error({
					message: '请完善表单信息！'
				}) */
			}
		})
		return flag
	}
	const resetForm = () => {
		formData.id = null
		ruleForm.value.resetFields()
	}
	defineExpose({
		validate,
		ruleForm,
		resetForm,
		formData,
	})
</script>
<style scoped>
	/* // @import '@/assets/styles/formData.scss'; */
	.el-form-item{
		display: flex;
	}
</style>